body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    background: #e1f1fd;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    color: #3f3f3f;
    font-family: 'Open Sans', Helvetica, sans-serif;
}

.marker {
    position: absolute;
    z-index: 5;
    top: 151px;
    left: 176px;
    font-size: 0;
    cursor: pointer;
    transform: perspective(600px) rotateY(0deg);
    opacity: 1;

    svg {
        fill: #ffcc30;
        animation: hovering 1s ease-in-out infinite alternate;
    }

    .shadow {
        width: 18px;
        height: 4px;
        background: #1b7ac7;
        border-radius: 50%;
        margin: 5px auto 0 auto;
        animation: shadow 1s ease-in-out infinite alternate;
    }
}

@keyframes hovering {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, -5px, 0);
    }
}

@keyframes shadow {
    from {
        transform: scale(1) translate3d(0, 0, 0);
    }
    to {
        transform: scale(1.25) translate3d(0, 0, 0);
    }
}
